<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>卡券流通列表</span>
            </div>
            <el-table
                :data="records.data"
                border
                size="mini"
                style="width: 100%">
                <el-table-column
                    label="记录id"
                    prop="id"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="卡券ID"
                    prop="voucher_id"
                    width="280">
                </el-table-column>
                <el-table-column
                    label="接收商户"
                    prop="username">
                </el-table-column>
                <el-table-column
                    label="当前流通次数"
                    prop="currentTimes">
                </el-table-column>

                <el-table-column
                    label="转移类型"
                    prop="typestatus">
                </el-table-column>
                <el-table-column
                    #default="{row:record}"
                    label="流通路径"
                >
                    <el-button plain size="mini" type="success" @click="getHistoryRecords(record.voucher_id)">查看
                    </el-button>
                    <el-dialog
                        :before-close="handleClose"
                        :visible.sync="dialogVisible"
                        title="流通路径"
                        width="60%"
                    >
                        <el-card class="box-card" shadow="never">
                            <div slot="header" class="clearfix">
                                <span>编号：{{ current_id }}，流通路径</span>
                            </div>
                            <div style="height: 300px;">
                                <el-steps :active="steps.length-1" direction="vertical"
                                          finish-status="success"
                                          process-status="process">
                                    <el-step v-for="(step,index) in steps" :key="index"
                                             :description="step.created_at| dateFormat"
                                             :title="step.user.name+'(转移类型：'+step.typestatus+')'">
                                    </el-step>
                                </el-steps>
                            </div>
                        </el-card>
                    </el-dialog>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    v-if="records.data"
                    :current-page="records.current_page"
                    :page-size="records.per_page"
                    :total="records.total"
                    background
                    layout="total,prev, pager, next"
                    @current-change="page"
                >
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import tabs from './tabs'

export default {
    route: {path: 'record/index', meta: {title: '流通记录'}},
    data() {
        return {
            records: {},
            tabs,
            dialogVisible: false,
            steps: [],
            current_id: null,
        }
    },
    async created() {
        this.records = await this.axios.get('admin/record')
    },
    methods: {
        async getHistoryRecords(id) {
            this.dialogVisible = true
            this.current_id = id
            this.steps = await this.axios.post(`admin/voucher/${this.current_id}/record`)
        },
        handleClose() {
            this.current_id = null
            this.dialogVisible = false

        },
        async page(page = 1) {
            let url = `admin/record?page=${page}`
            this.records = await this.axios.get(url);
        }
    }
}
</script>

<style scoped>

</style>
